<script setup>

import {useRoute, useRouter} from "vue-router";
import {get, post} from "@/net/index.js";
import axios from "axios";
import {computed, onMounted, reactive, ref} from "vue";
import {ArrowLeft, EditPen, Female, Male} from "@element-plus/icons-vue";
import {QuillDeltaToHtmlConverter} from 'quill-delta-to-html'
import Card from "@/components/Card.vue";
import {useStore} from "@/store/store.js";
import InteractButton from "@/components/InteractButton.vue";
import TopicEditor from "@/components/TopicEditor.vue";
import {ElMessage} from "element-plus";
const router = useRouter()
const route = useRoute()
const store = useStore()
const tid = route.params.tid
const topic = ref(null)
const edit = ref(false)
const getTopic = () =>{
  get(`/api/forum/listTopicDetail?tid=${tid}`, (response) => {
    const data = response.data
    topic.value = data
    // console.log(topic)
  })
}
const content = computed(() => {
  const ops = JSON.parse(topic.value?.content).ops
  const converter = new QuillDeltaToHtmlConverter(ops, {inlineStyles :true})
  return converter.convert()
})

const updateTopic = (editor) =>{
  post('/api/forum/updateTopic', {
    id: tid,
    title: editor.value.title,
    content: editor.value.text,
    type: editor.value.type.id,
  },() =>{
    ElMessage.success('帖子修改成功')
    edit.value = false
    getTopic()
  })
}
onMounted(() =>{
  getTopic()
})
</script>




<template>
  <div class="topic-page" v-if="topic">
    <div class="topic-main" style="position:sticky;top: 0;z-index: 10">
        <card style="display: flex;width: 100%">
          <el-button :icon="ArrowLeft" type="info" size="small" plain round @click="router.push('/index')">返回列表</el-button>
          <div style="flex: 1;text-align: center">
            <div class="topic-type"
                 :style="{
                  color: store.findTypeById(topic.type)?.color+ 'EE',
                  'border-color': store.findTypeById(topic.type)?.color+ '77',
                  'background': store.findTypeById(topic.type)?.color+ '33',
            }">
              {{ store.findTypeById(topic.type)?.name }}
            </div>
            <span style="margin-left: 5px" >{{topic.title}}</span>
          </div>
        </card>
    </div>
    <div class="topic-main">
      <div class="topic-main-left">
        <el-avatar :size="'default'" :src="`${axios.defaults.baseURL}/api/image/fetchImage?avatar=${topic.user.avatar}`"/>
        <div>
          <div style="font-size: 18px;font-weight: bold">
            {{topic.user.username}}
            <span style="color: hotpink" v-if="topic.user.sex === 1">
              <el-icon><Female/></el-icon>
            </span>
            <span style="color: dodgerblue" v-if="topic.user.sex === 0">
              <el-icon><Male/></el-icon>
            </span>
          </div>
          <div class="desc">{{topic.user.email}}</div>
          <el-divider style="margin: 10px 0"/>
          <div style="text-align: left;margin: 10px 0">
            <div class="desc" >WX: {{topic.user.wx || '未填写'}} </div>
            <div class="desc">QQ: {{topic.user.qq || '未填写'}}</div>
            <div class="desc">Phone: {{topic.user.phone || '未填写'}}</div>
          </div>
          <el-divider  style="margin: 10px 0"/>
          <div class="desc" style="margin: 0 5px">{{topic.user.description}}</div>
        </div>
      </div>
      <div class="topic-main-right">
          <div class="topic-content" v-html="content"></div>
          <el-divider />
        <div style="font-size: 13px;color: grey;text-align: center">
          <div>发帖时间: {{new Date(topic.time).toLocaleString()}}</div>
        </div>
        <div style="text-align: right;margin-top: 30px">
          <interact-button name="编辑帖子" color="dodgerblue" :check="false"
                           @check="edit = true" style="margin-right: 20px"
                           v-if="store.user.id === topic.user.id">
            <el-icon><EditPen/></el-icon>
          </interact-button>
        </div>
      </div>
    </div>
    <topic-editor :show="edit" @close="edit = false" v-if="topic"
     :default-type="topic.type" :default-text="topic.content" :default-title="topic.title" submit-button="更新帖子" :submit="updateTopic"/>
  </div>
</template>

<style scoped lang="less">
.topic-page{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 0;
}
.topic-main{
  display: flex;
  border-radius: 7px;
  margin: 0 auto;
  background-color: var(--el-bg-color);
  width: 800px;

  .topic-main-left{
    width: 200px;
    padding: 10px;
    text-align: center;
    border-right: 1px solid var(--el-border-color);

    .desc {
      font-size: 12px;
      color: grey;
    }
  }
  .topic-main-right{
    width: 800px;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;

    .topic-content{
      font-size: 14px;
      line-height: 22px;
      opacity: 0.8;
      flex: 1;
    }
  }
}

.topic-type {
  display: inline-block;
  border: solid 0.5px gray;
  border-radius: 5px;
  font-size: 12px;
  padding: 0 5px;
}
</style>